

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杨宇豪期末大作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .lygz {
            width: 100%;
            height: auto;
            /* border: 1px red solid; */
            margin: 0 auto;
            padding-top: 5px;
        }

        .header {
            width: 1200px;
            height: 80px;
            /* border: 1px blue solid; */
            margin: 0 auto;
        }

        .header-top {
            width: 200px;
            height: 50px;
        }

        .header-top img {
            width: 100%;
            height: 100%;
        }

        .header-bottom {
            width: 1100px;
            height: 30px;
            /* border: 1px rgb(255, 0, 191) solid; */
            margin: 0 auto;
            display: flex;
        }

        .header-bottom div {
            width: 150px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            /* border: 1px royalblue solid; */
        }

        .lbt {
            width: 100%;
            height: 300px;
        }

        .lbt img {
            width: 100%;
            height: 100%;
        }

        .lb-kuang {
            width: 1200px;
            height: 230px;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
        }

        .lb-left {
            width: 580px;
            height: 250px;
            /* border: 1px rgb(254, 196, 0) solid; */
        }

        .lb-right {
            width: 580px;
            height: 250px;
            /* border: 1px royalblue solid; */
        }

        .lbbt {
            width: 580px;
            height: 40px;
            display: flex;
            overflow: hidden;
        }

        .lbbt-left {
            width: 120px;
            height: 40px;
            /* border: 1px blue solid; */
            line-height: 40px;
            font-style: italic;
            font-weight: 600;
        }

        .lbbt-right {
            width: 460px;
            height: 40px;
            /* border: 1px blue solid; */
        }

        .lbbt-right img {
            width: 100%;
            height: 100%;
        }

        .lblan {
            width: 580px;
            height: 30px;
            /* border: 1px red solid; */
            display: flex;
        }

        .lblan-middle:hover {
            color: rgb(10, 116, 238);
        }

        .lblan-left {
            width: 15px;
            height: 15px;
            margin-top: 6px;
            text-align: center;
            margin-right: 20px;
        }

        .lblan-left img {
            width: 100%;
            height: 100%;
        }

        .lblan-middle {
            width: 440px;
            height: 30px;
            /* border: 1px red solid; */
            line-height: 30px;
            font-size: 14px;
            color: rgb(115, 115, 115);
        }

        .lblan-right {
            width: 120px;
            height: 30px;
            text-align: right;
            line-height: 30px;
            font-size: 14px;
            color: rgb(115, 115, 115);
        }

        .fgx {
            width: 100%;
            height: 30px;
        }

        .fgx img {
            width: 100%;
            height: 100%;
        }

        .footer {
            width: 100%;
            height: 200px;
        }

        .footer img {
            width: 100%;
            height: 100%;
        }

        .content {
            width: 1200px;
            height: 630px;
            /* border: 1px red solid; */
            margin: 0 auto;
            display: flex;
        }

        .content-left {
            width: 300px;
            height: 255px;
            margin-right: 20px;
            /* border: 1px blue solid; */
            background-color: rgb(63, 63, 63);
            color: rgb(255, 255, 255);
        }

        .content-right {
            width: 880px;
            height: 630px;
            border: 1px blue solid;
            overflow: hidden;
            display: none;
        }

        .lblan-lan {
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-weight: 600;
            text-align: center;
            border-bottom: 1px rgb(152, 152, 152) solid;
        }

        .lblan-lan {
            font-size: 21px;
        }

        .lbbt3 {
            width: 880px;
            height: 50px;
            display: flex;
            overflow: hidden;
        }

        .lbbt3-left {
            width: 220px;
            height: 50px;
            /* border: 1px blue solid; */
            line-height: 50px;
            font-weight: 600;
            font-size: 22px;
        }

        .lbbt3-right {
            width: 650px;
            height: 50px;
        }

        .lbbt3-right img {
            width: 100%;
            height: 100%;
        }

        .yw {
            font-size: 16px;
            font-weight: 400;
        }

        .yw2 {
            font-size: 18px;
            font-weight: 400;
            color: rgb(63, 63, 63);
        }

        .tiao-kuang {
            width: 880px;
            border-bottom: 1px rgb(139, 139, 139) dashed;
            padding-bottom: 15px;
            padding-top: 10px;
        }

        .tiao-top {
            width: 880px;
            height: 25px;
            display: flex;
            margin-bottom: 5px;
        }

        .tiao-left {
            width: 780px;
            height: 25px;
            line-height: 25px;
        }

        .tiao-right {
            width: 100px;
            height: 25px;
            font-size: 14px;
            color: rgb(106, 106, 106);
            line-height: 25px;
        }

        .sj {
            text-indent: 2em;
            line-height: 25px;
            font-size: 14px;
            color: rgb(111, 111, 111);
        }

        .fenye {
            width: 420px;
            height: 30px;
            /* border: 1px red solid; */
            margin-top: 20px;
            margin-left: 440px;
            display: flex;
            justify-content: space-between;
        }

        .fy-kuang {
            width: 30px;
            height: 30px;
            border: 1px rgb(41, 41, 41) solid;
            line-height: 30px;
            text-align: center;
        }

        .fy-kuang:first-child {
            background-color: rgb(199, 199, 199);
            color: rgb(255, 255, 255);
            line-height: 30px;
            text-align: center;
        }

        .fy-kuang:nth-child(2) {
            background-color: red;
            color: rgb(255, 255, 255);
            line-height: 30px;
        }

        .fy-kuang:last-child {

            background-color: red;
            color: rgb(255, 255, 255);
            line-height: 30px;
        }

        .xz {
            background-color: red;
            color: rgb(255, 255, 255);
        }

        .xs {
            display: block;
        }

        .content-left li {
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-weight: 600;
            text-align: center;
            border-bottom: 1px rgb(152, 152, 152) solid;
        }
    </style>
</head>

<body>
    <div class="lygz">
        <div class="lbt">
            <img src="img/banner01.jpg">
        </div>

        <div class="content">
            <ul class="content-left">
                <li class="xz">作业展示 <span class="yw">CONTENT LIST</span></li>
                <li>各学科课程联系图</li>
                <li>计算机课程参考资料</li>
                <li>浅谈计算机专业</li>
                <li>个人学业规划</li>
            </ul>
            <div class="content-right" style="display: block;">
                <div class="lbbt3">
                    <div class="lbbt3-left">作业展示</div>
                    <div class="lbbt3-right">
                        <img src="img/leftt.jpg">
                    </div>
                </div>
            </div>
            <div class="content-right">
                <div class="lbbt3">
                    <div class="lbbt3-left">各学科课程联系图</div>
                    <div class="lbbt3-right">
                        <img style="width:100%;height:100%;"src="./img/dll.png">
                    </div>
                </div>
                <div style=" width: 880px; height: 500px; border: 1px red solid;">
                    <img src="./img/cmp.png">
                </div>
            </div>
            <div class="content-right">
                <div class="lbbt3">
                    <div class="lbbt3-left">计算机课程参考资料</div>
                    <div class="lbbt3-right">
                        <img src="img/leftt.jpg">
                    </div>
                </div>
                <div class="tiao-kuang">
                    <div class="tiao-top">
                        <div class="tiao-left">
                        </div>
                        <div class="tiao-right">2022-1-21</div>
                    </div>
                    <div class="tiao-bottom">
                        <p class="sj"><a href="https://www.bilibili.com/video/BV19K411V7BQ?from=search&seid=15303765437603817072&spm_id_from=333.337.0.0">嵌入式计算机系统学习视频</a>
                        </p>
                    </div>
                </div>
                <div class="tiao-kuang">
                    <div class="tiao-top">
                        <div class="tiao-left">
                        </div>
                        <div class="tiao-right">2022-1-21</div>
                    </div>
                    <div class="tiao-bottom">
                        <p class="sj"><a href="https://www.bilibili.com/video/BV1oE4116794?from=search&seid=17739666011972857085&spm_id_from=333.337.0.0">形式语言与自动机</a>
                        </p>
                    </div>
                </div>
                <div class="tiao-kuang">
                    <div class="tiao-top">
                        <div class="tiao-left">
                        </div>
                        <div class="tiao-right">2022-1-21</div>
                    </div>
                    <div class="tiao-bottom">
                        <p class="sj"><a href="https://www.bilibili.com/video/BV1BE411D7ii?from=search&seid=14857580577842894807&spm_id_from=333.337.0.0">计算机组成原理</a>
                    </div>
                </div>
                <div class="tiao-kuang">
                    <div class="tiao-top">
                        <div class="tiao-left">
                        </div>
                        <div class="tiao-right">2022-1-21</div>
                    </div>
                    <div class="tiao-bottom">
                        <p class="sj"><a href="https://www.bilibili.com/video/BV1ra4y1t7xY?from=search&seid=7545726143689405775&spm_id_from=333.337.0.0">数据库原理</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="content-right">
                <div class="lbbt3">
                    <div class="lbbt3-left">浅谈计算机专业</div>
                    <div class="lbbt3-right">
                        <img src="img/leftt.jpg">
                    </div>
                </div>
                <div class="tiao-kuang">
                    <div class="tiao-top">
                        <h3 class="tiao-left">谈谈我对计算机专业的认识
                        </h3>
                        <div class="tiao-right">2022-11-21</div>
                    </div>
                    <div class="tiao-bottom">
                        <p class="sj">计算机专业的核心学科，我们在上面已经提到了。计算机专业是一门非常庞大的学科，想要面面俱到绝对是不太可能的。
						同时我觉得，在讨论计算机专业的时候，数学一定是一个很重要的辅助工具。我们必须学好数学。
						计算机专业有对理论的讲授，也有实际的应用部分。而计算机专业的范围，其实并没有被定义，它的边界仍在等待我们探索。
                        </p>
                    </div>
                </div>

            </div>
            <div class="content-right">
                <div class="lbbt3">
                    <div class="lbbt3-left">个人学业规划</div>
                    <div class="lbbt3-right">
                        <img src="img/leftt.jpg">
                    </div>
                </div>
                <div class="tiao-kuang">
                    <div class="tiao-top">
                        <h3 class="tiao-left">第五页
                        </h3>
                        <div class="tiao-right">2017-11-21</div>
                    </div>
                    <div class="tiao-bottom">
                        <p class="sj">个人学业规划：我从去年起，就对微电子专业十分感兴趣。也正是这个原因，我在少年班分流后选择了电类这个大类。
                        接下来的这个学期，我会继续努力，在分专业时进入微电子专业。
						读大三时，要明确自己的方向（数字电路设计），并且开始考虑国内读研或者出国深造，在两者中选择一个。
						大四会明确自己的选择，然后完成毕业设计。
						结束学业后我会选择进入华为或小米等企业，争取做一名工程师。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="fgx">
            <img src="img/telBg.jpg">
        </div>
        <div class="footer">
            <img src="img/ftBg.jpg">
        </div>
    </div>
    <script>
        //获取元素
        let fl = document.querySelector('.content-left')
        let lis = fl.querySelectorAll('li')
        for (let i = 0; i < lis.length; i++) {
            //开始给5个小li设置索引号
            lis[i].setAttribute('index', i)
            let hero = document.getElementsByClassName('content-right')
            lis[i].onclick = function () {
                //排他思想 干掉所有人
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                //留下自己
                this.className = 'xz'
                //得到当前index；里面的属性值
                let index = this.getAttribute('index');
                for (let i = 0; i < hero.length; i++) {
                    hero[i].style.display = 'none'
                }
                hero[i].style.display = 'block'
            }

        }
    </script>
</body>

</html>